<template>
	<div>
		<div class="swiper Centericons-swiper">
			<!-- 主体的滑动区 -->
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="item in maps" :key="item.id" >
					<img :src="item.src">
				</li>
			</ul>
			<!--分页器。如果放置在swiper外面，需要自定义样式。-->
			<div class="swiper-pagination Centericons-pagination"></div>
		</div>
	</div>
</template>

<script>
	// 1.引入vue周期函数
	import { onMounted } from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper , {
		Autoplay ,
		EffectCoverflow ,
		EffectCube ,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use( [Autoplay ,EffectCoverflow ,EffectCube ,Pagination] );
	
	export default
	{
		name : 'Centericons',
		data()
		{
			return {
				maps : [
					{ id:1 , src:'img/conimg/swiper1.jpg' },
					{ id:2 , src:'img/conimg/swiper2.jpg' },
					{ id:3 , src:'img/conimg/swiper3.jpg' }
					],
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper( '.Centericons-swiper' , {
					// 循环播放
					loop : true,
					// 设置分页器效果
					pagination : {
						el : '.Centericons-pagination'
					},
					// 设置播放项: 时间,不停止,手指经过不暂停自动
					autoplay : {
						delay : 2000,
						stopOnLastSlide : false,
						disableOnInteraction : false
					}
				} )
			} )
		}
	}
</script>

<style scoped >
	/*轮播区域的样式*/
	.Centericons-swiper
	{
		width: 100%;
		height: 5.6rem;
	}
	.Centericons-swiper img
	{
		width: 100%;
		
		height: 100%;
	}
	/* 穿透 */
	.Centericons-pagination :deep(.swiper-pagination-bullet-active)
	{
		background-color: #f6d83f;
	}
</style>
